<template>
  <div>
    <div class="order-top">
      <div>
        <div style="display: inline-block">
          <label style="font-size: 16px">订单号：</label>
          <div class="order-num">
            {{ diaForm.number }}
          </div>
        </div>
        <div
          style="display: inline-block"
          class="order-status"
          :class="{ status3: [1, 2].includes(diaForm.status) }"
        >
          {{ orderList[diaForm.status].label }}
        </div>
      </div>
      <p><label>下单时间：</label>{{ diaForm.orderTime }}</p>
    </div>

    <div class="order-middle">
      <div class="user-info">
        <div class="user-info-box">
          <el-table
            v-if="diaForm.orderDetailList.length"
            :data="diaForm.orderDetailList"
            stripe
            class="tableBox"
          >
            <el-table-column type="index" width="60" label="序号" align="center"/>
            <el-table-column prop="name" label="菜品名称"/>
            <el-table-column prop="dishFlavor" label="菜品口味"/>
            <el-table-column prop="number" align="center" label="数量"/>

            <el-table-column
              v-if="diaForm.status!==1"
              prop="status"
              label="状态"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ statusList[row.status].label }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="amount"
              label="金额"
              align="center"
            >
              <template slot-scope="{ row }">
                <span>￥{{ (row.amount.toFixed(2) * 100) / 100 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-if="diaForm.status!==1&&diaForm.status!==4"
              prop="btn"
              label="操作"
              align="center"
              min-width="auto"
              class-name="otherOperate"
            >
              <template slot-scope="{ row }">
                <div class="before" style="width: 50px">
                  <el-button
                    v-if="row.status !== 3 && row.status!==4"
                    type="text"
                    class="blueBug"
                    @click="updateDishStatus(row, 3)"
                  >
                    完成
                  </el-button>
                </div>
                <div class="after" style="width: 50px">
                  <el-button
                    v-if="row.status !== 4"
                    type="text"
                    class="delBut"
                    @click="updateDishStatus(row,4)"
                  >
                    取消
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          class="user-remark"
          :class="{ orderCancel: diaForm.status === 4 }"
        >
          <div>{{ diaForm.status === 4 ? '取消原因' : '备注' }}</div>
          <span>{{ diaForm.status === 4 ? diaForm.cancelReason : diaForm.remark }}</span>
        </div>
      </div>
    </div>

    <div class="order-bottom" style="margin-bottom: 60px">
      <div class="amount-info">
        <div class="amount-label">
          小计：
        </div>
        <div class="amount-num">
          ￥{{ diaForm.amount }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import {completeOrder, orderCancel, putOrderDetailUpdateApi} from '../../api/order';

@Component({
  name: 'OrderDetail'
})
export default class extends Vue {
  @Prop({default: {}}) diaForm: any

  private orderList = [
    {
      label: '全部订单',
      value: 0,
    },
    {
      label: '待接单',
      value: 1,
    },
    {
      label: '未完成',
      value: 2,
    },
    {
      label: '已完成',
      value: 3,
    },
    {
      label: '已取消',
      value: 4,
    }
  ]

  private statusList = [
    {
      label: '待加工',
      value: 0,
    },
    {
      label: '加工中',
      value: 1,
    },
    {
      label: '待传菜',
      value: 2,
    },
    {
      label: '完成',
      value: 3,
    },
    {
      label: '已取消',
      value: 4,
    }
  ]

  updateDishStatus(row, status) {
    this.$confirm(`此菜品当前状态为'${this.statusList[row.status].label}'，你确定要更改状态为'${this.statusList[status].label}'吗?`, {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }).then(async () => {
        await putOrderDetailUpdateApi({orderId: this.diaForm.id, id: row.id, status})
      this.$emit('updateOrderDetailData')
      this.$message.success('操作成功')
    })
  }

}
</script>

<style lang="scss" scoped>
.order-top {
  // height: 80px;
  border-bottom: 1px solid #e7e6e6;
  padding-bottom: 26px;
  padding-left: 22px;
  padding-right: 22px;
  // margin: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .order-status {
    width: 57.25px;
    height: 27px;
    background: #333333;
    border-radius: 13.5px;
    color: white;
    margin-left: 19px;
    text-align: center;
    line-height: 27px;
  }

  .status3 {
    background: #f56c6c;
  }

  p {
    color: #333;

    label {
      color: #666;
    }
  }

  .order-num {
    font-size: 16px;
    color: #2a2929;
    font-weight: bold;
    display: inline-block;
  }
}

.order-middle {
  .user-info {
    min-height: 140px;
    background: #fbfbfa;
    margin-top: 23px;

    padding: 20px 43px;
    color: #333;

    .user-info-box {
      min-height: 55px;
      display: flex;
      flex-wrap: wrap;

      .user-name {
        flex: 67%;
      }

      .user-phone {
        flex: 33%;
      }

      .user-getTime {
        margin-top: 14px;
        flex: 80%;

        label {
          margin-right: 3px;
        }
      }

      label {
        margin-right: 17px;
        color: #666;
      }

      .user-address {
        margin-top: 14px;
        flex: 80%;

        label {
          margin-right: 30px;
        }
      }
    }

    .user-remark {
      min-height: 43px;
      line-height: 43px;
      background: #fffbf0;
      border: 1px solid #fbe396;
      border-radius: 4px;
      margin-top: 10px;
      padding: 6px;
      display: flex;
      align-items: center;

      div {
        display: inline-block;
        min-width: 53px;
        height: 32px;
        background: #fbe396;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        color: #333;
        margin-right: 30px;
        // padding: 12px 6px;
      }

      span {
        color: #f2a402;
        line-height: 1.15;
      }
    }

    .orderCancel {
      background: #ffffff;
      border: 1px solid #b6b6b6;

      div {
        padding: 0 10px;
        background-color: #e5e4e4;
      }

      span {
        color: #f56c6c;
      }
    }
  }

  .dish-info {
    // min-height: 180px;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;
    border-bottom: 1px solid #e7e6e6;

    .dish-label {
      color: #666;
    }

    .dish-list {
      flex: 80%;
      display: flex;
      flex-wrap: wrap;

      .dish-item {
        flex: 50%;
        margin-bottom: 14px;
        color: #333;

        .dish-num {
        }

        .dish-item-box {
          display: inline-block;
          width: 120px;
        }
      }
    }

    .dish-label {
      margin-right: 65px;
    }

    .dish-all-amount {
      flex: 1;
      padding-left: 92px;
      margin-top: 10px;

      label {
        color: #333333;
        font-weight: bold;
        margin-right: 5px;
      }

      span {
        color: #f56c6c;
      }
    }
  }
}

.order-bottom {
  .amount-info {
    // min-height: 180px;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 40px;
    padding-bottom: 0px;

    .amount-label {
      color: #666;
      margin-right: 65px;
    }

    .amount-list {
      flex: 80%;
      display: flex;
      flex-wrap: wrap;
      color: #333;
      // height: 65px;
      .dish-amount,
      .package-amount,
      .pay-type {
        display: inline-block;
        width: 300px;
        margin-bottom: 14px;
        flex: 50%;
      }

      .send-amount,
      .all-amount,
      .pay-time {
        display: inline-block;
        flex: 50%;
        padding-left: 10%;
      }

      .package-amount {
        .amount-name {
          margin-right: 14px;
        }
      }

      .all-amount {
        .amount-name {
          margin-right: 24px;
        }

        .amount-price {
          color: #f56c6c;
        }
      }

      .send-amount {
        .amount-name {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
